﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
	CodeBehind="Animation.aspx.cs" Inherits="ControlExplorer.C1Accordion.Animation" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Accordion"
	TagPrefix="C1Accordion" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<h3>
		缓和的动画</h3>
	<C1Accordion:C1Accordion ID="C1Accordion1" runat="server" Animated-Effect="easeInOutCirc">
		<Panes>
			<C1Accordion:C1AccordionPane ID="C1AccordionPane1" runat="server">
				<Header>
					第一
				</Header>
				<Content>
					<p>
						ComponentOne 使用强大的客户端核心技术--Wijmo，为从WebForms到MVC应用程序开发提供最终的UI控件。
                        使用Wijmo这一项技术您就可以完成客户端到服务端的所有开发工作，Studio for ASP.NET Wijmo控件包是
                        您团队在进行Web应用程序开发时一件不可多得的利器。
					</p>
				</Content>
			</C1Accordion:C1AccordionPane>
			<C1Accordion:C1AccordionPane ID="C1AccordionPane2" runat="server">
				<Header>
					第二
				</Header>
				<Content>
					<p>
						使用集 HTML5、jQuery、CSS3、和 SVG 多项技术于一体的 Studio for ASP.NET Wijmo 控件包进行开发，
                        可以让您的 Web 应用系统紧跟当前的流行趋势，并能让您的 Web 应用程序拥有更快的执行速度、用户访问
                        也更加流畅。
					</p>
				</Content>
			</C1Accordion:C1AccordionPane>
			<C1Accordion:C1AccordionPane ID="C1AccordionPane3" runat="server">
				<Header>
					第三
				</Header>
				<Content>
					<p>
						您可以非常便捷地为您的整个系统定义统一的显示外观。您可以使用 Studio for ASP.NET Wijmo 控件
                        包内置的6个主题，同时您还可以使用 jQuery UI项目提供的 30 多个主题，甚至可以使用 ThemeRoller 
                        创建属于您自己的系统主题。
					</p>
				</Content>
			</C1Accordion:C1AccordionPane>
		</Panes>
	</C1Accordion:C1Accordion>
	<br />
	<h3>
		不使用动画
	</h3>
	<C1Accordion:C1Accordion ID="C1Accordion2" runat="server" Animated-Disabled="True">
		<Panes>
			<C1Accordion:C1AccordionPane ID="C1AccordionPane4" runat="server">
				<Header>
					第一
				</Header>
				<Content>
					<p>
						ComponentOne 使用强大的客户端核心技术--Wijmo，为从WebForms到MVC应用程序开发提供最终的UI控件。
                        使用Wijmo这一项技术您就可以完成客户端到服务端的所有开发工作，Studio for ASP.NET Wijmo控件包是
                        您团队在进行Web应用程序开发时一件不可多得的利器。
					</p>
				</Content>
			</C1Accordion:C1AccordionPane>
			<C1Accordion:C1AccordionPane ID="C1AccordionPane5" runat="server">
				<Header>
					第二
				</Header>
				<Content>
					<p>
						使用集 HTML5、jQuery、CSS3、和 SVG 多项技术于一体的 Studio for ASP.NET Wijmo 控件包进行开发，
                        可以让您的 Web 应用系统紧跟当前的流行趋势，并能让您的 Web 应用程序拥有更快的执行速度、用户访问
                        也更加流畅。
					</p>
				</Content>
			</C1Accordion:C1AccordionPane>
			<C1Accordion:C1AccordionPane ID="C1AccordionPane6" runat="server">
				<Header>
					第三
				</Header>
				<Content>
					<p>
						您可以非常便捷地为您的整个系统定义统一的显示外观。您可以使用 Studio for ASP.NET Wijmo 控件
                        包内置的6个主题，同时您还可以使用 jQuery UI项目提供的 30 多个主题，甚至可以使用 ThemeRoller 
                        创建属于您自己的系统主题。
					</p>
				</Content>
			</C1Accordion:C1AccordionPane>
		</Panes>
	</C1Accordion:C1Accordion>
	<br />
	<h3>
		自定义动画</h3>
	<C1Accordion:C1Accordion ID="C1Accordion3" runat="server" Animated-Effect="custom1">
		<Panes>
			<C1Accordion:C1AccordionPane ID="C1AccordionPane7" runat="server">
				<Header>
					第一
				</Header>
				<Content>
					<p>
						ComponentOne 使用强大的客户端核心技术--Wijmo，为从WebForms到MVC应用程序开发提供最终的UI控件。
                        使用Wijmo这一项技术您就可以完成客户端到服务端的所有开发工作，Studio for ASP.NET Wijmo控件包是您
                        团队在进行Web应用程序开发时一件不可多得的利器。
					</p>
				</Content>
			</C1Accordion:C1AccordionPane>
			<C1Accordion:C1AccordionPane ID="C1AccordionPane8" runat="server">
				<Header>
					第二
				</Header>
				<Content>
					<p>
						使用集 HTML5、jQuery、CSS3、和 SVG 多项技术于一体的 Studio for ASP.NET Wijmo 控件包进行开发，
                        可以让您的 Web 应用系统紧跟当前的流行趋势，并能让您的 Web 应用程序拥有更快的执行速度、用户访问
                        也更加流畅。
					</p>
				</Content>
			</C1Accordion:C1AccordionPane>
			<C1Accordion:C1AccordionPane ID="C1AccordionPane9" runat="server">
				<Header>
					第三
				</Header>
				<Content>
					<p>
						您可以非常便捷地为您的整个系统定义统一的显示外观。您可以使用 Studio for ASP.NET Wijmo 控件
                        包内置的6个主题，同时您还可以使用 jQuery UI项目提供的 30 多个主题，甚至可以使用 ThemeRoller 
                        创建属于您自己的系统主题。
					</p>
				</Content>
			</C1Accordion:C1AccordionPane>
		</Panes>
	</C1Accordion:C1Accordion>
	<script id="scriptInit" type="text/javascript">
		$(document).ready(function () {
			jQuery.wijmo.wijaccordion.animations.custom1 = function (options) {
				this.slide(options, {
					easing: options.down ? "easeOutBounce" : "swing",
					duration: options.down ? 1000 : 200
				});
			}
		});
	</script>
	<br />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
	<p>
		此示例演示了如何使用<strong>C1Accordion</strong> 控件展现各种动画效果。</p>
	<p>&nbsp;</p>
	<p>
		 <strong>Animated </strong>属性用于改变动画效果。</p>
	<p>&nbsp;</p>
	<p>
		在第一个accordion中， <strong>Animated.Effect </strong>属性设置为 "easeInOutCirc" ，展示出来的是缓和的变换效果。</p>
	<p>
		在第二个accordion中， 设置的是无动画效果，变换不带有动画效果。</p>
	<p>
		在第三个accordion中， 我们使用的是自定义动画效果。
		<strong>Animated.Effect
		</strong>属性设置为 "custom1"。"custom1" 效果使用客户端脚本有如下定义：

<pre class="controldescription-code">
	$(document).ready(function () {
		jQuery.wijmo.wijaccordion.animations.custom1 = function (options) {
			this.slide(options, {
				easing: options.down ? "easeOutBounce" : "swing",
				duration: options.down ? 1000 : 200
			});
		}
	});	
</pre>

		可用的动画功能选项包括：
		<ul>
			<li><strong>向下</strong>– 值为True时，表示展开的窗口应大于折叠窗口。 </li>
			<li><strong>横向</strong>– 值为True时，表示accordion 有一个水平方向
				 (拓展方向为左侧或右测)。 </li>
			<li><strong>从右至左</strong> – 值为True时，表示内容先于标题显示 (拓展方向为顶部或左侧)。 </li>
			<li><strong>显示 </strong>– 显示jQuery对象包含的元素内容。 
			</li>
			<li><strong>隐藏 </strong>– 隐藏jQuery对象包含的元素内容。
			</li>
		</ul>
	</p>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>
